<template>
	<view class="address-add-box">
		<view class="address-add-content">
			<view class="address-add-title">
				联系人信息
			</view>
			<view class="address-add-item">
				<view class="address-add-item-left">
					真实姓名
				</view>
				<input class="address-add-item-input" type="text" v-model="userName" placeholder="请填写真实姓名">
			</view>
			<view class="address-add-item">
				<view class="address-add-item-left">
					联系电话
				</view>
				<input class="address-add-item-input" type="number" v-model="userPhone" placeholder="请填写联系电话">
			</view>
			<view class="address-add-item">
				<view class="address-add-item-left">
					所在城市
				</view>
				<view class="address-add-item-right">
					<picker style="width: 100%;" mode="multiSelector" :range="areaArray" range-key="name"  @change="areaArraySelect" @columnchange='areaArrayFun'>
						<view class="area-box-item">
							<view class="huishou-news-address-select-text">{{areaText}}</view>
							<image class="huishou-weight-right-img" :src="rightjiantou" mode="widthFix"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="text-content">
				<textarea class="textarea-box" v-model="addressDetail" placeholder="请填写详细地址(街道,楼牌号等)" />
				<view @click="jingweiduFun" style="width: 50px;height: 100px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
					<image class="dingwei-icon" :src="dingweiIcon" mode="widthFix"></image>
				</view>
			</view>
			<view class="address-add-item" style="border: none;">
				<label style="display: flex;flex-direction: row;align-items: center;font-size: 13px;color: #666;" @click="radioChange">
					<view class="radio-item" v-if="ifIsDefault != 1"></view>
					<image class="dui_img" :src="duiguo_img" v-if="ifIsDefault == 1" mode=""></image>
						<!-- <view class="radio-item-select" v-if="ifIsDefault == 1">
							<view class="radio-item-select-gou"></view>
						</view> -->
					
					默认地址
				</label>
			</view>
		</view>
		
		<view class="bottom-box">
			<view class="bottom-btn" @click="baocunFun">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/js/qqmap-wx-jssdk.js');
	var qqmapsdk;
	import http from '../../api/api-index.js'
	import baseUrl from '../../utils/config.js'
	import dituKey from '../../utils/setTing.js'
	
	export default{
		data(){
			return{
				dingweiIcon:baseUrl+'/uploads/static/image/recovery_address_add_icon_location@2x.png',
				rightjiantou:baseUrl+'/uploads/static/image/right-jiantou.png',
				duiguo_img:baseUrl+'/uploads/static/image/recovery_pubilc_sel_frame_face@2x.png',
				address_id:'',
				ifIsDefault:0,
				
				userName:'',
				userPhone:'',
				areaArray:[
					// [{name:'北京市',id:100}],
					// ['1','2'],
					// ['1','2','3']
				],
				areaText:'省/市/区',
				oneArea:[], //省
				twoArea: [], //市
				threeArea: [], //区
				fourArea:[], //街道
				selectIndex:[],//选中的下标
				
				province_id:'',//省
				city_id:'',//市
				area_id:'',//区
				street_id:'',//街道
				addressDetail:'',//详细地址
				lng:'',//经度
				lat:'',//维度
				
				type:'',//是不是预约界面过来的
			}
		},
		onLoad(options) {
			console.log(options)
			// 实例化API核心类
		   qqmapsdk = new QQMapWX({
			 key: dituKey.key
		   });
		    this.type = options.type
			if(options.id){
				console.log('编辑')
				uni.setNavigationBarTitle({
					title: '编辑地址'
				});
				this.address_id = options.id
				this.getAddressDetailsFun(this.address_id)
			}
			this.areaChange(0,0)
			
		},
		methods:{
			getAddressDetailsFun(id){
				//获取地址详情
				var _this = this
				http.getAddressDetails({id:id}).then((res)=>{
					console.log(res)
					if(res.data.code == 1){
						let data = res.data.data
						
						_this.userName = data.true_name
						_this.province_id = data.province_id
						_this.city_id = data.city_id
						_this.area_id = data.area_id 
						_this.street_id = data.street_id 
						_this.addressDetail = data.address 
						_this.userPhone = data.mobile
						_this.lng = data.lng 
						_this.lat = data.lat
						_this.ifIsDefault = data.is_default
						_this.areaText = data.province + '/' +data.city+'/'+data.area+'/'+data.street_name
						
					}
				})
			},
			areaChange(id,type){
				//type 0是省 1是市 2是区
				let _this = this
				http.getAreaChange({parent_id:id}).then((res)=>{
					if(type == 0){
						_this.oneArea = res.data
						_this.areaChange(res.data[0].id,1)
					}else if(type == 1){
						_this.twoArea = res.data
						_this.areaChange(res.data[0].id,2)
					}else if(type == 2){
						_this.threeArea = res.data
						_this.areaChange(res.data[0].id,3)
					}else if(type == 3){
						_this.fourArea = res.data
					}
					_this.areaArray = [
						_this.oneArea,
						_this.twoArea,
						_this.threeArea,
						_this.fourArea
					]
				})
			},
			radioChange(e){
				this.ifIsDefault = !this.ifIsDefault
			},
			areaArraySelect(e){
				this.selectIndex = e.detail.value
				
				//选中的省市区街道
				this.areaText = this.areaArray[0][this.selectIndex[0]].name + '/' + this.areaArray[1][this.selectIndex[1]].name + '/' + this.areaArray[2][this.selectIndex[2]].name + '/' + this.areaArray[3][this.selectIndex[3]].name
				
				this.province_id = this.areaArray[0][this.selectIndex[0]].id
				this.city_id = this.areaArray[1][this.selectIndex[1]].id
				this.area_id = this.areaArray[2][this.selectIndex[2]].id
				this.street_id = this.areaArray[3][this.selectIndex[3]].id
			},
			areaArrayFun(e){
				let type = e.detail.column
				let index = e.detail.value
				if(type == 0){
					let id = this.areaArray[0][index].id
					this.areaChange(id,1)
				}else if(type == 1){
					let id = this.areaArray[1][index].id
					this.areaChange(id,2)
				}else if(type == 2){
					let id = this.areaArray[2][index].id
					this.areaChange(id,3)
				}
			},
			jingweiduFun(){
				//注意权限问题
				let _this = this
				if(this.areaText != '省/市/区'){
					let allAddress = this.areaText + this.addressDetail
					qqmapsdk.geocoder({
						address:allAddress,
						success:function(ress){
							var lat=ress.result.location.lat
							var lng=ress.result.location.lng
							_this.lat = lat 
							_this.lng = lng
							uni.chooseLocation({
								latitude: _this.lat,
								longitude: _this.lng,
								success: function (res) {
									console.log('位置名称：' + res.name);
									console.log('详细地址：' + res.address);
									console.log('纬度：' + res.latitude);
									console.log('经度：' + res.longitude);
									_this.addressDetail = res.name
									_this.lat = res.latitude
									_this.lng = res.longitude
								}
							});
						}
					})
				}else{
					uni.getSetting({
					   success(res) {
						   console.log(res)
						   if(res.authSetting['scope.userLocation']){
							   uni.getLocation({
							   	type: 'wgs84', //返回可以用于uni.openLocation的经纬度
							   	success: function (res) {
							   		const latitude = res.latitude;
							   		const longitude = res.longitude;
							   		uni.chooseLocation({
							   			latitude: latitude,
							   			longitude: longitude,
							   			success: function (res) {
							   				console.log('位置名称：' + res.name);
							   				console.log('详细地址：' + res.address);
							   				console.log('纬度：' + res.latitude);
							   				console.log('经度：' + res.longitude);
							   				_this.addressDetail = res.name
							   				_this.lat = res.latitude
							   				_this.lng = res.longitude
							   			}
							   		});
							   	}
							   });
						   }else{
							   uni.authorize({
							   	scope: 'scope.userLocation',
							   	success() {
							   		uni.getLocation({
							   			type: 'wgs84', //返回可以用于uni.openLocation的经纬度
							   			success: function (res) {
							   				const latitude = res.latitude;
							   				const longitude = res.longitude;
							   				uni.chooseLocation({
							   					latitude: latitude,
							   					longitude: longitude,
							   					success: function (res) {
							   						console.log('位置名称：' + res.name);
							   						console.log('详细地址：' + res.address);
							   						console.log('纬度：' + res.latitude);
							   						console.log('经度：' + res.longitude);
							   						_this.addressDetail = res.name
							   						_this.lat = res.latitude
							   						_this.lng = res.longitude
							   					}
							   				});
							   			}
							   		});
							   	},
							   	fail(){
							   		uni.showModal({
							   			title:'提示',
							   			content: '暂无权限获取用户位置,请检查定位服务是否开启或定位权限拒绝'
							   		})
							   	}
							   })
						   }
						}
					})
				}
			},
			baocunFun(){
				let _this = this
				let allAddress = ''
				if(this.areaText != '省/市/区'){
					allAddress = this.areaText + this.addressDetail
				}else{
					if(!this.areaArray[0][this.selectIndex[0]]){
						uni.showToast({
							title:'请选择省市区',
							icon:'none'
						})
						return false
					}
					allAddress = this.areaArray[0][this.selectIndex[0]].name  + this.areaArray[1][this.selectIndex[1]].name  + this.areaArray[2][this.selectIndex[2]].name + this.areaArray[3][this.selectIndex[3]].name + this.addressDetail
				}
				
				if(this.lat == ''){
					qqmapsdk.geocoder({
						address:allAddress,
						success:function(res){
							var lat=res.result.location.lat
							var lng=res.result.location.lng
							_this.lat = lat 
							_this.lng = lng
							http.getAddressAddEnit({
								id:_this.address_id,
								true_name:_this.userName,
								province_id:_this.province_id,
								city_id:_this.city_id,
								area_id:_this.area_id,
								street_id:_this.street_id,
								address:_this.addressDetail,
								mobile:_this.userPhone,
								lng:_this.lng,
								lat:_this.lat,
								is_default:_this.ifIsDefault
							}).then((res)=>{
								if(res.data.code == 1){
									uni.showToast({
										title:res.data.msg,
										duration:2000
									})
									uni.navigateTo({
										url:'/pages/my/addressManage?type='+_this.type
									})
								}
							})
						}
					})
				}else{
					http.getAddressAddEnit({
						id:_this.address_id,
						true_name:_this.userName,
						province_id:_this.province_id,
						city_id:_this.city_id,
						area_id:_this.area_id,
						street_id:_this.street_id,
						address:_this.addressDetail,
						mobile:_this.userPhone,
						lng:_this.lng,
						lat:_this.lat,
						is_default:_this.ifIsDefault
					}).then((res)=>{
						if(res.data.code == 1){
							uni.showToast({
								title:res.data.msg,
								duration:2000,
							})
							uni.navigateTo({
								url:'/pages/my/addressManage?type='+_this.type
							})
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					})
				}
				
				
				
			}
		}
	}
</script>

<style>
	.address-add-box{
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background: #F8F9FD;
	}
	.address-add-content{
		width: calc(100% - 24px);
		margin: 0 auto;
		margin-top: 12px;
		background-color: #fff;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 20px 20px 10px 20px;
	}
	.address-add-title{
		font-size: 17px;
		font-weight: bold;
		color: #333;
		font-family: 'PingFang Bold';
		margin-bottom: 20px;
		margin-top: 10px;
	}
	.address-add-item{
		width: 100%;
		min-height: 54px;
		display: flex;flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #F6F6F6;
		align-items: center;
	}
	.address-add-item-left{width: 70px;}
	.address-add-item-right{display: flex;flex-direction: row;align-items: center;width: calc(100% - 100px);}
	.address-add-item-input{
		width: calc(100% - 100px);
		height: 55px;
		font-size: 16px;
	}
	.text-content{
		width: 100%;
		box-sizing: border-box;
		padding: 20px 0;
		display: flex;flex-direction: row;
		align-items: center;
		border-bottom: 1px solid #F6F6F6;
	}
	.textarea-box{
		width: calc(100% - 50px);
		height: 100px;
	}
	.radio-item{
		width: 14px;
		height: 14px;
		border: 1px solid #999;
		margin-right: 5px;
		border-radius: 3px;
	}
	.dui_img{
		width: 17px;
		height: 17px;
		margin-right: 5px;
	}
	.radio-item-select{
		width: 16px;
		height: 16px;
		border-radius: 5px;
		border: 1px solid #00CB8B;
		background: #00CB8B;
		overflow: hidden;
		position: relative;
		top: -1px;
		left: -1px;
		z-index: 10;
	}
	.radio-item-select-gou{
		width: 10px;
		height: 5px;
		position: absolute;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		top: 3px;
		left: 2px;
	}
	.bottom-box{
		width: 100%;
		height: calc(70px + env(safe-area-inset-bottom) /2);
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		box-sizing: border-box;
		padding: 12px;
	}
	.bottom-btn{
		width: 100%;
		height: 45px;
		background: #00CB8B;
		text-align: center;
		line-height: 45px;
		font-size: 16px;
		color: #fff;
		border-radius: 5px;
	}
	.area-box-item{width: 100%;display: flex;flex-direction: row;align-items: center;justify-content: space-between;}
	.huishou-news-address-select-text{font-size: 16px;color: #333;line-height: 30px;}
	.huishou-weight-right-img{width: 16px;height: 16px;margin-left: 10px;}
	.dingwei-icon{
		width: 20px;
		height: 20px;
	}
</style>